<!--
  ~ Copyright 2022 Scheer PAS Schweiz AG
  ~
  ~  Licensed under the Apache License, Version 2.0 (the "License");
  ~  you may not use this file except in compliance with the License.
  ~  You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~  Unless required by applicable law or agreed to in writing, software
  ~  distributed under the License is distributed on an "AS IS" BASIS,
  ~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~  See the License for the specific language governing permissions and
  ~  imitations under the License.
  -->

<!-- Try it now -->
<div class="grid">
  <div>
    <h4>{{ 'COMMON.API_DOCS' | translate }}</h4>
    <p [innerHTML]="'DESCRIPTIONS.TRY_IT_OUT' | translate"></p>
  </div>
  <div id="try-it-now-btn">
    <ng-container *ngIf="docsAvailable && contract">
      <app-api-documentation-buttons
        [contract]="contract"
        [downloadEnabled]="true"
        [target]="target"></app-api-documentation-buttons>
    </ng-container>
    <ng-container *ngIf="docsAvailable && !contract">
      <app-api-documentation-buttons
        [apiVersion]="newContractDetails.apiVersion"
        [downloadEnabled]="true"
        [target]="target"></app-api-documentation-buttons>
    </ng-container>
  </div>
</div>

<!-- Key -->
<div class="grid">
  <div>
    <h4>{{ 'CLIENTS.API_KEY' | translate }}</h4>
    <p [innerHTML]="'DESCRIPTIONS.API_KEY' | translate"></p>
  </div>
  <div>
    <mat-form-field>
      <input
        id="api-key-input"
        matInput
        readonly
        value="{{ apiKeyUi }}"
        [placeholder]="'COMMON.HTTP_HEADER' | translate" />
      <button
        id="api-key-copy-btn"
        [disabled]="disableButtons"
        [cdkCopyToClipboard]="apiKeyUi"
        mat-icon-button
        matSuffix
        class="input-icon-btn">
        <mat-icon id="api-key-copy-icon" class="input-icon-btn" color="primary"
          >content_copy</mat-icon
        >
      </button>
    </mat-form-field>
  </div>
</div>

<!-- API Endpoint -->
<div class="grid">
  <div>
    <h4>{{ 'CLIENTS.ENDPOINT' | translate }}</h4>
    <p [innerHTML]="'DESCRIPTIONS.API_ENDPOINT' | translate"></p>
  </div>
  <div>
    <mat-form-field>
      <input
        id="api-endpoint-input"
        matInput
        readonly
        value="{{ endpoint }}"
        [placeholder]="'COMMON.QUERY_PARAMETER' | translate" />
      <button
        id="api-endpoint-copy-btn"
        [disabled]="disableButtons"
        [cdkCopyToClipboard]="endpoint"
        mat-icon-button
        matSuffix
        class="input-icon-btn">
        <mat-icon id="api-endpoint-copy-icon" color="primary"
          >content_copy</mat-icon
        >
      </button>
    </mat-form-field>
  </div>
</div>

<!-- Authentication -->
<div class="grid" *ngIf="hasOAuth">
  <div>
    <h4>{{ 'CLIENTS.AUTHENTICATION' | translate }}</h4>
    <p [innerHTML]="'DESCRIPTIONS.O_AUTH' | translate"></p>
  </div>
  <div>
    <mat-form-field>
      <mat-label>OAuth 2 Server URL</mat-label>
      <input matInput readonly value="https://localhost:4200/authentication" />
      <button
        [disabled]="disableButtons"
        [cdkCopyToClipboard]="''"
        mat-icon-button
        matSuffix
        class="input-icon-btn">
        <mat-icon class="input-icon-btn" color="primary" [class.disabled]=""
          >content_copy</mat-icon
        >
      </button>
    </mat-form-field>
    <mat-form-field>
      <mat-label>OAuth 2 Client Secret</mat-label>
      <input matInput readonly value="fer87)/9&9gdea" />
      <button
        [disabled]="disableButtons"
        [cdkCopyToClipboard]="''"
        mat-icon-button
        matSuffix
        class="input-icon-btn">
        <mat-icon class="input-icon-btn" color="primary">content_copy</mat-icon>
      </button>
    </mat-form-field>
  </div>
</div>
